<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<th:block th:replace="librarian/common :: head"></th:block>
<body>
  <div class="container-scroller">
    <!-- partial:../../partials/_navbar.html -->

      <div th:replace="librarian/common :: navbar"></div>

    <!-- partial -->
    <div class="container-fluid page-body-wrapper">
      <div class="row row-offcanvas row-offcanvas-right">
        <!-- partial:../../partials/_sidebar.html -->
          <th:block th:replace="librarian/common :: sidebar"></th:block>
          <!-- partial -->
         <div class="content-wrapper">

 <header class="page-header">
                <div class="container-fluid">
                    <h2 class="no-margin-bottom">Register</h2>
                </div>
            </header>

            <!-- Form Elements -->
            <section class="forms">
            <div class="col-lg-12">
                <div class="card">
                    <div class="card-close">
                    </div>
                    <div class="card-header d-flex align-items-center">
                        <h3 class="h4">Register form</h3>
                    </div>
                    <div class="card-body">
                        <div class="form-horizontal">
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">Name</label>
                                <div class="col-sm-9">
                                    <input id="name" type="text" class="form-control">
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">Email</label>
                                <div class="col-sm-9">
                                    <input id="email" type="email" class="form-control"><!-- small class="help-block-none">A block of help text that breaks onto a new line and may extend beyond one line.</small -->
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">Phone Number</label>
                                <div class="col-sm-9">
                                    <input id="phoneNumber" type="text" class="form-control"><!-- small class="help-block-none"></small -->
                                </div>
                            </div>
                            <div class="line"></div>
                            <div class="form-group row">
                                <label class="col-sm-3 form-control-label">Password</label>
                                <div class="col-sm-9">
                                    <input id="password" type="password" name="password" class="form-control">
                                </div>
                            </div>

                            <div class="line"></div>
                            <div class="form-group row">
                                <div class="col-sm-4 offset-sm-3">
                                    <button class="btn btn-secondary">Cancel</button>
                                    <button id="submit" class="btn btn-primary">Register</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </section>
          <div class="col-12 grid-margin">
    <div class="card">
                        <div class="container-fluid">
                          <div class="card-body" >
                          <div id="titleid"></div>
                          <div id="barcode">
                            <!-- img id="imgcode"/ -->
                          </div>
                          <div id="download"></div>
                         </div>
</div>
</div>
</div>
        </div>
        <!-- content-wrapper ends -->
        <!-- partial:../../partials/_footer.html -->

          <div th:replace="librarian/common :: footer"></div>

        <!-- partial -->
      </div>
      <!-- row-offcanvas ends -->
    </div>
    <!-- page-body-wrapper ends -->
  </div>
  <!-- container-scroller -->

  <div th:replace="librarian/common :: scripts"></div>

    <script>
        $("#submit").bind("click", function () {
            if($("#name").val()==""||$("#phoneNumber").val()==""||$("#email").val()==""||$("#password").val()=="")
                alertWarning("the input can not be empty");
            else{
            let formData=new FormData();
            formData.append("name", $("#name").val());
            formData.append("phoneNumber", $("#phoneNumber").val());
            formData.append("email", $("#email").val());
            formData.append("password", $("#password").val());

            $.ajax({
                url: "/api/reader",
                type: "POST",
                dataType: "json",
                data: formData,
                processData: false,
                contentType: false,
                success: function (resp){
                    alertSuccess("registered succeed");
                    $("#name").val("");
                    $("#phoneNumber").val("");
                    $("#email").val("");
                    $("#password").val("");
                    $("#titleid").empty();
                    $("#titleid").append("<h4 class=\"card-title\">Reader Barcode</h4>");
                    var key='barcode_img'+resp.data.userId;
                    $("<img />", {
                        id: key
                    }).appendTo($("#barcode"));
                    $("#"+key).JsBarcode(padNumber(resp.data.userId), {
                        height: 40,
                    });
                    $('#download').empty();
                    $('#download').append("<button onclick=\"downloadId()\">download</button>");
                },
               
                error: function (resp) {
                    alertError(resp.responseJSON.message);
                }
            });
        }})

        function downloadId(){
            var barcode = document.getElementById("barcode");
            var imgs = barcode.getElementsByTagName("img");
            var a = document.createElement('a');
            a.download = 'readerId' + new Date().getTime() || 'readerId.jpg';
            a.href = imgs[0].src;
            document.body.appendChild(a);
            a.click();
            document.body.removeChild(a);
            // alertSuccess("download success!");
        }
    </script>

</body>

</html>
